<script lang="ts" setup>
import { computed, onMounted, reactive, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { IconifyIcon } from '@vben/icons';
import DeviceControlPanel from './components/DeviceControlPanel.vue';
import AlertManagement from './components/AlertManagement.vue';
import {
  Button,
  Card,
  Col,
  Descriptions,
  Divider,
  message,
  Row,
  Space,
  Steps,
  Tag,
  Timeline,
} from 'ant-design-vue';

const route = useRoute();
const router = useRouter();

// 设备详情数据
const deviceDetail = ref({
  id: route.params.id as string,
  name: '智能门锁-101',
  type: 'lock',
  model: 'SL-2000',
  manufacturer: '海康威视',
  location: '1号楼101房间',
  ipAddress: '192.168.1.101',
  port: '8080',
  status: 'online',
  lastUpdate: '2024-01-19 15:30:00',
  battery: 85,
  signal: 92,
  firmware: 'v2.1.0',
  installDate: '2023-06-15',
  warranty: '2025-06-15',
  description: '智能门锁设备，支持指纹、密码、卡片等多种开锁方式',
});

// 当前激活的标签页
const activeTab = ref('control');

// 设备状态历史
const statusHistory = ref([
  {
    time: '2024-01-19 15:30:00',
    status: 'online',
    event: '设备上线',
  },
  {
    time: '2024-01-19 14:25:00',
    status: 'offline',
    event: '网络断开',
  },
  {
    time: '2024-01-19 13:15:00',
    status: 'online',
    event: '设备重启',
  },
  {
    time: '2024-01-19 12:00:00',
    status: 'online',
    event: '设备上线',
  },
]);

// 维护记录
const maintenanceRecords = ref([
  {
    id: '1',
    date: '2024-01-15',
    type: '定期维护',
    description: '设备清洁和固件更新',
    technician: '张工程师',
    status: 'completed',
  },
  {
    id: '2',
    date: '2024-01-10',
    type: '故障维修',
    description: '更换电池和检查连接',
    technician: '李技术员',
    status: 'completed',
  },
  {
    id: '3',
    date: '2024-01-05',
    type: '安装调试',
    description: '新设备安装和初始配置',
    technician: '王安装员',
    status: 'completed',
  },
]);

// 获取状态颜色
const getStatusColor = (status: string) => {
  const colors = {
    online: 'green',
    offline: 'red',
    error: 'orange',
    maintenance: 'blue',
  };
  return colors[status] || 'default';
};

// 获取状态文本
const getStatusText = (status: string) => {
  const texts = {
    online: '在线',
    offline: '离线',
    error: '故障',
    maintenance: '维护中',
  };
  return texts[status] || status;
};

// 获取设备类型文本
const getTypeText = (type: string) => {
  const texts = {
    lock: '门锁',
    meter: '水电表',
    camera: '摄像头',
    sensor: '传感器',
    controller: '控制器',
  };
  return texts[type] || type;
};

// 获取电池状态颜色
const getBatteryColor = (battery: number) => {
  if (battery > 60) return 'green';
  if (battery > 30) return 'orange';
  return 'red';
};

// 获取信号强度颜色
const getSignalColor = (signal: number) => {
  if (signal >= 80) return 'green';
  if (signal >= 60) return 'blue';
  if (signal >= 40) return 'orange';
  return 'red';
};

// 重启设备
const restartDevice = () => {
  message.loading('正在重启设备...', 2).then(() => {
    message.success('设备重启成功');
    deviceDetail.value.lastUpdate = new Date().toLocaleString();
  });
};

// 更新固件
const updateFirmware = () => {
  message.loading('正在更新固件...', 3).then(() => {
    message.success('固件更新成功');
    deviceDetail.value.firmware = 'v2.1.1';
  });
};

// 返回设备列表
const goBack = () => {
  router.push('/hotel/iot-devices');
};

onMounted(() => {
  // 根据路由参数加载设备详情
  console.log('加载设备详情:', route.params.id);
});
</script>

<template>
  <div class="device-detail-page">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-left">
        <Button @click="goBack" type="link">
          <IconifyIcon icon="ant-design:arrow-left-outlined" />
          返回设备列表
        </Button>
        <h2>{{ deviceDetail.name }}</h2>
        <Tag :color="getStatusColor(deviceDetail.status)">
          {{ getStatusText(deviceDetail.status) }}
        </Tag>
      </div>
      <div class="header-right">
        <Space>
          <Button @click="restartDevice">
            <IconifyIcon icon="ant-design:reload-outlined" />
            重启设备
          </Button>
          <Button @click="updateFirmware">
            <IconifyIcon icon="ant-design:cloud-upload-outlined" />
            更新固件
          </Button>
        </Space>
      </div>
    </div>

    <!-- 设备基本信息 -->
    <Card title="设备信息" class="info-card">
      <Row :gutter="24">
        <Col :span="12">
          <Descriptions :column="1" bordered>
            <Descriptions.Item label="设备名称">
              {{ deviceDetail.name }}
            </Descriptions.Item>
            <Descriptions.Item label="设备类型">
              {{ getTypeText(deviceDetail.type) }}
            </Descriptions.Item>
            <Descriptions.Item label="设备型号">
              {{ deviceDetail.model }}
            </Descriptions.Item>
            <Descriptions.Item label="生产厂商">
              {{ deviceDetail.manufacturer }}
            </Descriptions.Item>
            <Descriptions.Item label="安装位置">
              {{ deviceDetail.location }}
            </Descriptions.Item>
            <Descriptions.Item label="IP地址">
              {{ deviceDetail.ipAddress }}
            </Descriptions.Item>
          </Descriptions>
        </Col>
        <Col :span="12">
          <Descriptions :column="1" bordered>
            <Descriptions.Item label="设备状态">
              <Tag :color="getStatusColor(deviceDetail.status)">
                {{ getStatusText(deviceDetail.status) }}
              </Tag>
            </Descriptions.Item>
            <Descriptions.Item label="最后更新">
              {{ deviceDetail.lastUpdate }}
            </Descriptions.Item>
            <Descriptions.Item label="电池电量">
              <Tag :color="getBatteryColor(deviceDetail.battery)">
                {{ deviceDetail.battery }}%
              </Tag>
            </Descriptions.Item>
            <Descriptions.Item label="信号强度">
              <Tag :color="getSignalColor(deviceDetail.signal)">
                {{ deviceDetail.signal }}%
              </Tag>
            </Descriptions.Item>
            <Descriptions.Item label="固件版本">
              {{ deviceDetail.firmware }}
            </Descriptions.Item>
            <Descriptions.Item label="安装日期">
              {{ deviceDetail.installDate }}
            </Descriptions.Item>
          </Descriptions>
        </Col>
      </Row>

      <Divider />

      <div class="device-description">
        <h4>设备描述</h4>
        <p>{{ deviceDetail.description }}</p>
      </div>
    </Card>

    <!-- 功能标签页 -->
    <Card class="tab-card">
      <div class="tab-header">
        <Space>
          <Button
            :type="activeTab === 'control' ? 'primary' : 'default'"
            @click="activeTab = 'control'"
          >
            <IconifyIcon icon="ant-design:control-outlined" />
            设备控制
          </Button>
          <Button
            :type="activeTab === 'alerts' ? 'primary' : 'default'"
            @click="activeTab = 'alerts'"
          >
            <IconifyIcon icon="ant-design:alert-outlined" />
            告警管理
          </Button>
          <Button
            :type="activeTab === 'history' ? 'primary' : 'default'"
            @click="activeTab = 'history'"
          >
            <IconifyIcon icon="ant-design:history-outlined" />
            状态历史
          </Button>
          <Button
            :type="activeTab === 'maintenance' ? 'primary' : 'default'"
            @click="activeTab = 'maintenance'"
          >
            <IconifyIcon icon="ant-design:tool-outlined" />
            维护记录
          </Button>
        </Space>
      </div>

      <!-- 设备控制面板 -->
      <div v-if="activeTab === 'control'" class="tab-content">
        <DeviceControlPanel
          :device-id="deviceDetail.id"
          :device-name="deviceDetail.name"
          :device-type="deviceDetail.type"
        />
      </div>

      <!-- 告警管理 -->
      <div v-if="activeTab === 'alerts'" class="tab-content">
        <AlertManagement :device-id="deviceDetail.id" />
      </div>

      <!-- 状态历史 -->
      <div v-if="activeTab === 'history'" class="tab-content">
        <Card title="设备状态历史" class="history-card">
          <Timeline>
            <Timeline.Item
              v-for="(item, index) in statusHistory"
              :key="index"
              :color="getStatusColor(item.status)"
            >
              <div class="timeline-content">
                <div class="timeline-time">{{ item.time }}</div>
                <div class="timeline-event">{{ item.event }}</div>
                <Tag :color="getStatusColor(item.status)">
                  {{ getStatusText(item.status) }}
                </Tag>
              </div>
            </Timeline.Item>
          </Timeline>
        </Card>
      </div>

      <!-- 维护记录 -->
      <div v-if="activeTab === 'maintenance'" class="tab-content">
        <Card title="维护记录" class="maintenance-card">
          <div
            v-for="record in maintenanceRecords"
            :key="record.id"
            class="maintenance-item"
          >
            <div class="maintenance-header">
              <div class="maintenance-info">
                <div class="maintenance-date">{{ record.date }}</div>
                <div class="maintenance-type">{{ record.type }}</div>
                <div class="maintenance-technician">
                  维护人员: {{ record.technician }}
                </div>
              </div>
              <Tag :color="record.status === 'completed' ? 'green' : 'blue'">
                {{ record.status === 'completed' ? '已完成' : '进行中' }}
              </Tag>
            </div>
            <div class="maintenance-description">
              {{ record.description }}
            </div>
          </div>
        </Card>
      </div>
    </Card>
  </div>
</template>

<style scoped>
.device-detail-page {
  min-height: 100vh;
  padding: 24px;
  background-color: #f0f2f5;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  margin-bottom: 24px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
}

.header-left {
  display: flex;
  gap: 16px;
  align-items: center;
}

.header-left h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
}

.info-card {
  margin-bottom: 24px;
}

.device-description {
  margin-top: 16px;
}

.device-description h4 {
  margin-bottom: 8px;
  font-weight: 500;
}

.device-description p {
  margin: 0;
  line-height: 1.6;
  color: #666;
}

.tab-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
}

.tab-header {
  padding: 16px 0;
  border-bottom: 1px solid #f0f0f0;
}

.tab-content {
  padding: 24px 0;
}

.history-card {
  background: white;
}

.timeline-content {
  display: flex;
  gap: 12px;
  align-items: center;
}

.timeline-time {
  min-width: 140px;
  font-size: 12px;
  color: #999;
}

.timeline-event {
  flex: 1;
  font-weight: 500;
}

.maintenance-card {
  background: white;
}

.maintenance-item {
  padding: 16px;
  margin-bottom: 16px;
  background: #fafafa;
  border: 1px solid #f0f0f0;
  border-radius: 6px;
}

.maintenance-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.maintenance-info {
  display: flex;
  gap: 16px;
  align-items: center;
}

.maintenance-date {
  font-weight: 500;
  color: #1890ff;
}

.maintenance-type {
  font-weight: 500;
}

.maintenance-technician {
  font-size: 12px;
  color: #666;
}

.maintenance-description {
  line-height: 1.5;
  color: #666;
}

:deep(.ant-card-body) {
  padding: 16px;
}

:deep(.ant-descriptions-item-label) {
  font-weight: 500;
  background-color: #fafafa;
}
</style>
